<template>
  <div class="home">
    <div class="common-layout">
      <el-container>
        <el-aside width="250px">
          <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
            <el-radio-button :label="true">折叠</el-radio-button>
            <el-radio-button :label="false">展开</el-radio-button>
          </el-radio-group> -->
          <el-menu
            default-active="/"
            class="el-menu-vertical-demo"
            :collapse="isCollapse"
            @open="handleOpen"
            @close="handleClose"
            :router="true"
          >
            <el-menu-item index="/">
              <el-icon><Discount /></el-icon>
              <template #title>首页</template>
            </el-menu-item>
            <el-sub-menu index="2">
              <template #title>
                <el-icon><document /></el-icon>
                <span>文档</span>
              </template>
              <el-menu-item-group>
                <template #title><span>文档类型1</span></template>
                <el-menu-item index="1-1">文档1</el-menu-item>
                <el-menu-item index="1-2">文档2</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="文档类型2">
                <el-menu-item index="1-3">文档3</el-menu-item>
              </el-menu-item-group>
              <el-sub-menu index="1-4">
                <template #title><span>文档4</span></template>
                <el-menu-item index="1-4-1">文档4-1</el-menu-item>
              </el-sub-menu>
            </el-sub-menu>

            <el-menu-item index="3">
              <el-icon><Star /></el-icon>
              <template #title>图标</template>
            </el-menu-item>
            <el-menu-item index="4">
              <el-icon><PieChart /></el-icon>
              <template #title>常用图表</template>
            </el-menu-item>
            <el-menu-item index="5" disabled>
              <el-icon><document /></el-icon>
              <template #title>测试</template>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-container>
          <el-header
            ><div>
              <el-row :gutter="20">
                <el-col :span="2"
                  ><div>
                    <svg
                      class="icon"
                      viewBox="0 0 1024 1024"
                      xmlns="http://www.w3.org/2000/svg"
                      width="64"
                      height="64"
                    >
                      <path
                        d="M477.3 905.3c-4.7 0-8.5-3.8-8.5-8.5V145.1c0-4.7 3.8-8.5 8.5-8.5s8.5 3.8 8.5 8.5v751.7c0 4.7-3.8 8.5-8.5 8.5z"
                        fill="#21455B"
                      />
                      <path
                        d="M477.3 308.2c-2.2 0-4.4-.8-6-2.5l-122-122c-3.3-3.3-3.3-8.7 0-12 3.3-3.3 8.7-3.3 12 0l122 122c3.3 3.3 3.3 8.7 0 12-1.6 1.6-3.8 2.5-6 2.5z"
                        fill="#21455B"
                      />
                      <path
                        d="M477.3 308.2c-2.2 0-4.4-.8-6-2.5-3.3-3.3-3.3-8.7 0-12l122-122c3.3-3.3 8.7-3.3 12 0 3.3 3.3 3.3 8.7 0 12l-122 122c-1.6 1.6-3.8 2.5-6 2.5zm122 564.5c-2.2 0-4.4-.8-6-2.5l-122-122c-3.3-3.3-3.3-8.7 0-12 3.3-3.3 8.7-3.3 12 0l122 122c3.3 3.3 3.3 8.7 0 12-1.6 1.6-3.8 2.5-6 2.5z"
                        fill="#21455B"
                      />
                      <path
                        d="M355.3 872.7c-2.2 0-4.4-.8-6-2.5-3.3-3.3-3.3-8.7 0-12l122-122c3.3-3.3 8.7-3.3 12 0 3.3 3.3 3.3 8.7 0 12l-122 122c-1.6 1.6-3.8 2.5-6 2.5zm497.9-343.3H101.5c-4.7 0-8.5-3.8-8.5-8.5s3.8-8.5 8.5-8.5h751.7c4.7 0 8.5 3.8 8.5 8.5s-3.8 8.5-8.5 8.5z"
                        fill="#21455B"
                      />
                      <path
                        d="M698.6 529.4c-2.2 0-4.4-.8-6-2.5-3.3-3.3-3.3-8.7 0-12l122-122c3.3-3.3 8.7-3.3 12 0 3.3 3.3 3.3 8.7 0 12l-122 122c-1.7 1.7-3.8 2.5-6 2.5z"
                        fill="#21455B"
                      />
                      <path
                        d="M820.6 651.4c-2.2 0-4.4-.8-6-2.5l-122-122c-3.3-3.3-3.3-8.7 0-12 3.3-3.3 8.7-3.3 12 0l122 122c3.3 3.3 3.3 8.7 0 12-1.7 1.7-3.9 2.5-6 2.5zm-686.5 0c-2.2 0-4.4-.8-6-2.5-3.3-3.3-3.3-8.7 0-12l122-122c3.3-3.3 8.7-3.3 12 0 3.3 3.3 3.3 8.7 0 12l-122 122c-1.7 1.7-3.9 2.5-6 2.5z"
                        fill="#21455B"
                      />
                      <path
                        d="M256.1 529.4c-2.2 0-4.4-.8-6-2.5l-122-122c-3.3-3.3-3.3-8.7 0-12 3.3-3.3 8.7-3.3 12 0l122 122c3.3 3.3 3.3 8.7 0 12-1.7 1.7-3.9 2.5-6 2.5zm412.8 181.2c-2.1 0-4.2-.8-5.8-2.3L279.9 345.9c-3.4-3.2-3.6-8.6-.3-12 3.2-3.4 8.6-3.6 12-.3L674.7 696c3.4 3.2 3.6 8.6.3 12-1.6 1.7-3.9 2.6-6.1 2.6z"
                        fill="#21455B"
                      />
                      <path
                        d="M290.9 353c-4.7 0-8.5-3.8-8.5-8.5v-92.9c0-4.7 3.8-8.5 8.5-8.5s8.5 3.8 8.5 8.5v92.9c0 4.7-3.8 8.5-8.5 8.5z"
                        fill="#21455B"
                      />
                      <path
                        d="M290.9 353h-98.2c-4.7 0-8.5-3.8-8.5-8.5s3.8-8.5 8.5-8.5h98.2c4.7 0 8.5 3.8 8.5 8.5s-3.8 8.5-8.5 8.5zM364.9 423c-4.7 0-8.5-3.8-8.5-8.5v-92.9c0-4.7 3.8-8.5 8.5-8.5s8.5 3.8 8.5 8.5v92.9c0 4.7-3.8 8.5-8.5 8.5z"
                        fill="#21455B"
                      />
                      <path
                        d="M364.9 423h-98.2c-4.7 0-8.5-3.8-8.5-8.5s3.8-8.5 8.5-8.5h98.2c4.7 0 8.5 3.8 8.5 8.5s-3.8 8.5-8.5 8.5zM663.8 798.6c-4.7 0-8.5-3.8-8.5-8.5v-92.9c0-4.7 3.8-8.5 8.5-8.5s8.5 3.8 8.5 8.5v92.9c0 4.7-3.8 8.5-8.5 8.5z"
                        fill="#21455B"
                      />
                      <path
                        d="M761.9 705.8h-98.2c-4.7 0-8.5-3.8-8.5-8.5s3.8-8.5 8.5-8.5h98.2c4.7 0 8.5 3.8 8.5 8.5s-3.8 8.5-8.5 8.5zM589.8 728.6c-4.7 0-8.5-3.8-8.5-8.5v-92.9c0-4.7 3.8-8.5 8.5-8.5s8.5 3.8 8.5 8.5v92.9c0 4.7-3.8 8.5-8.5 8.5z"
                        fill="#21455B"
                      />
                      <path
                        d="M687.9 635.8h-98.2c-4.7 0-8.5-3.8-8.5-8.5s3.8-8.5 8.5-8.5h98.2c4.7 0 8.5 3.8 8.5 8.5s-3.8 8.5-8.5 8.5zM296.1 721c-2.1 0-4.2-.8-5.8-2.3-3.4-3.2-3.6-8.6-.3-12l362.4-383.1c3.2-3.4 8.6-3.6 12-.3 3.4 3.2 3.6 8.6.3 12l-362.4 383c-1.7 1.8-3.9 2.7-6.2 2.7z"
                        fill="#21455B"
                      />
                      <path
                        d="M653.7 343c-4.7 0-8.5-3.8-8.5-8.5s3.8-8.5 8.5-8.5h92.9c4.7 0 8.5 3.8 8.5 8.5s-3.8 8.5-8.5 8.5h-92.9z"
                        fill="#21455B"
                      />
                      <path
                        d="M653.7 343c-4.7 0-8.5-3.8-8.5-8.5v-98.2c0-4.7 3.8-8.5 8.5-8.5s8.5 3.8 8.5 8.5v98.2c0 4.7-3.8 8.5-8.5 8.5zM676.5 417h-92.9c-4.7 0-8.5-3.8-8.5-8.5s3.8-8.5 8.5-8.5h92.9c4.7 0 8.5 3.8 8.5 8.5s-3.8 8.5-8.5 8.5z"
                        fill="#21455B"
                      />
                      <path
                        d="M583.7 417c-4.7 0-8.5-3.8-8.5-8.5v-98.2c0-4.7 3.8-8.5 8.5-8.5s8.5 3.8 8.5 8.5v98.2c0 4.6-3.8 8.5-8.5 8.5zM301 715.9h-92.9c-4.7 0-8.5-3.8-8.5-8.5s3.8-8.5 8.5-8.5H301c4.7 0 8.5 3.8 8.5 8.5s-3.9 8.5-8.5 8.5z"
                        fill="#21455B"
                      />
                      <path
                        d="M301 814c-4.7 0-8.5-3.8-8.5-8.5v-98.2c0-4.7 3.8-8.5 8.5-8.5s8.5 3.8 8.5 8.5v98.2c0 4.7-3.9 8.5-8.5 8.5zM370.9 641.9H278c-4.7 0-8.5-3.8-8.5-8.5s3.8-8.5 8.5-8.5h92.9c4.7 0 8.5 3.8 8.5 8.5s-3.8 8.5-8.5 8.5z"
                        fill="#21455B"
                      />
                      <path
                        d="M370.9 740c-4.7 0-8.5-3.8-8.5-8.5v-98.2c0-4.7 3.8-8.5 8.5-8.5s8.5 3.8 8.5 8.5v98.2c0 4.7-3.8 8.5-8.5 8.5z"
                        fill="#21455B"
                      />
                      <path
                        d="M385.5 520.9a91.8 91.8 0 1 0 183.6 0 91.8 91.8 0 1 0-183.6 0z"
                        fill="#44A7EA"
                      />
                      <path
                        d="M477.3 621.2c-55.3 0-100.3-45-100.3-100.3s45-100.3 100.3-100.3 100.3 45 100.3 100.3-45 100.3-100.3 100.3zm0-183.6c-45.9 0-83.3 37.4-83.3 83.3s37.4 83.3 83.3 83.3 83.3-37.4 83.3-83.3-37.3-83.3-83.3-83.3zM826.5 229.6c-2.2 0-4.4-.8-6-2.5-3.3-3.3-3.3-8.7 0-12l86.9-86.9c3.3-3.3 8.7-3.3 12 0 3.3 3.3 3.3 8.7 0 12l-86.9 86.9c-1.6 1.7-3.8 2.5-6 2.5z"
                        fill="#21455B"
                      />
                      <path
                        d="M893.2 163c-4.7 0-8.5-3.8-8.5-8.5v-25.6c0-4.7 3.8-8.5 8.5-8.5s8.5 3.8 8.5 8.5v25.6c0 4.7-3.8 8.5-8.5 8.5z"
                        fill="#21455B"
                      />
                      <path
                        d="M918.8 163h-25.6c-4.7 0-8.5-3.8-8.5-8.5s3.8-8.5 8.5-8.5h25.6c4.7 0 8.5 3.8 8.5 8.5s-3.8 8.5-8.5 8.5zM846.8 234.9c-4.7 0-8.5-3.8-8.5-8.5v-25.6c0-4.7 3.8-8.5 8.5-8.5s8.5 3.8 8.5 8.5v25.6c0 4.7-3.8 8.5-8.5 8.5z"
                        fill="#21455B"
                      />
                      <path
                        d="M846.8 209.4h-25.6c-4.7 0-8.5-3.8-8.5-8.5s3.8-8.5 8.5-8.5h25.6c4.7 0 8.5 3.8 8.5 8.5s-3.8 8.5-8.5 8.5zM913.4 229.6c-2.2 0-4.4-.8-6-2.5l-86.9-86.9c-3.3-3.3-3.3-8.7 0-12 3.3-3.3 8.7-3.3 12 0l86.9 86.9c3.3 3.3 3.3 8.7 0 12-1.6 1.7-3.8 2.5-6 2.5z"
                        fill="#21455B"
                      />
                      <path
                        d="M913.4 206.8h-22.8c-4.7 0-8.5-3.8-8.5-8.5s3.8-8.5 8.5-8.5h22.8c4.7 0 8.5 3.8 8.5 8.5s-3.8 8.5-8.5 8.5z"
                        fill="#21455B"
                      />
                      <path
                        d="M890.6 229.6c-4.7 0-8.5-3.8-8.5-8.5v-22.8c0-4.7 3.8-8.5 8.5-8.5s8.5 3.8 8.5 8.5v22.8c0 4.7-3.8 8.5-8.5 8.5zM849.3 165.5h-22.8c-4.7 0-8.5-3.8-8.5-8.5s3.8-8.5 8.5-8.5h22.8c4.7 0 8.5 3.8 8.5 8.5s-3.8 8.5-8.5 8.5z"
                        fill="#21455B"
                      />
                      <path
                        d="M849.3 165.5c-4.7 0-8.5-3.8-8.5-8.5v-22.8c0-4.7 3.8-8.5 8.5-8.5s8.5 3.8 8.5 8.5V157c0 4.7-3.8 8.5-8.5 8.5z"
                        fill="#21455B"
                      />
                    </svg></div
                ></el-col>
                <el-col :span="20"><div></div></el-col>
                <el-col :span="2"
                  ><div class="avatar">
                    <n-avatar
                      round
                      :size="50"
                      :style="{
                        backgroundColor: '#fff4e5',
                      }"
                    >
                      <img src="../../assets/images/lufe.webp" />
                    </n-avatar>
                    <span>Parker</span>
                  </div></el-col
                >
              </el-row>
            </div>
          </el-header>
          <el-main><RouterView></RouterView></el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>
<script lang="ts" setup>
// @ts-ignore
import { ref } from "vue";
const isCollapse = ref(false);
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
</script>
<style lang="less" scoped>
.home {
  // font-family: 楷体;
  height: 100%;

  .common-layout {
    height: 100%;
    .el-container {
      height: 100%;
      .el-aside {
        .el-menu {
          // background-color: #34caca;
          height: 100%;
        }
      }
    }
  }
  .el-header {
    background: url("../../assets/images/nav.png");
    background-repeat: no-repeat;
    background-size: 1920px 60px;
    background-position: 0px 0px;
    .header {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .el-col {
      // border: 1px solid #000;
      display: flex;
      justify-content: center;
      align-items: center;
      .avatar {
        display: flex;
        align-items: center;
        span {
          font-family: 宋体;
          font-size: 20px;
          font-weight: 600;
        }
      }
    }
  }
  .el-main {
    background: url("../../assets/images/main.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0px 0px;
  }
}
</style>
